<!-- 预约车辆 - 预约车辆详情页面-->
<template>
	<view class="main-box">
		<view class="main-box-item">
			<view class="box-info-label">
				车牌号
			</view>
			<view class="box-info-value">
				{{item.carcode}}
				<image v-if="(!!item.code)" class="img" @click="goCarDetail" src="/static/img/icon/icon_car.png"
					mode="aspectFill">
				</image>
			</view>
			<!-- 定义一个变量phone，不能用 item.approver.phone ，深入监听不了-->
			<view v-if="(!!phone)" class="box-info-phone" @click="doPhone(phone)">
				<image class="img" src="/static/img/icon/icon-phone.png" mode="aspectFill">
				</image>
				联系管理员
			</view>
			<!-- 出入状态 -->
			<block v-if="(!!item.status)">
				<view class="status" :style="getRecordState(item.status).stylefill">
					{{getRecordState(item.status).value}}
				</view>
			</block>

			<!-- 审批状态 -->
			<block v-else-if="(!!item.state)">
				<view class="status" :style="getApproveState(item.state).stylefill">
					{{getApproveState(item.state).value}}
				</view>
			</block>
		</view>
		<!-- 挂车号 -->
		<block v-if="!!item.trailercode">
			<view class="main-box-item">
				<view class="box-info-label">
					挂车号
				</view>
				<view class="box-info-value">
					{{item.trailercode}}
				</view>
			</view>
		</block>
		<view class="main-box-item">
			<view class="box-info-label">
				目的地
			</view>
			<view class="box-info-value">
				{{item.destination || ''}}
			</view>
		</view>
		<view class="main-box-item">
			<view class="box-info-label">
				入园原因
			</view>
			<view class="box-info-value">
				{{item.reason || ''}}
			</view>
		</view>
		<view class="main-box-item">
			<view class="box-info-label">
				货物信息
			</view>
			<view class="box-info-value">
				{{item.goods || ''}}
			</view>
		</view>
		<view class="main-box-item">
			<view class="box-info-label">
				数量(吨)
			</view>
			<view class="box-info-value">
				{{item.number || ''}}
			</view>
		</view>
		<view class="main-box-item">
			<view class="box-info-label">
				转运联单号
			</view>
			<view class="box-info-value">
				{{item.transitno || ''}}
			</view>
		</view>
		<view :class="[!!imgList&&imgList.length>0?'main-box-item2':'main-box-item' ]">
			<view class="box-info-label">
				运单照片
			</view>
			<view class="box-info-value">
				<view class="img-box">
					<attachment ref="upImg" :imgList="imgList" :imgCount="imgCount" :disabled="true" :type="'codeimg'">
					</attachment>
				</view>
			</view>
		</view>
		<view class="main-box-item">
			<view class="box-info-label">
				联系电话
			</view>
			<view class="box-info-value">
				{{item.contactphone || ''}}
			</view>
		</view>
		<view class="main-box-item">
			<view class="box-info-label">
				驾驶员
			</view>
			<view class="box-info-value">
				{{item.driver || ''}}
			</view>
		</view>
		<view class="main-box-item">
			<view class="box-info-label">
				押运员
			</view>
			<view class="box-info-value">
				{{item.escort || ''}}
			</view>
		</view>
		<view class="main-box-item">
			<view class="box-info-label">
				其他人员
			</view>
			<view class="box-info-value">
				{{item.others || ''}}
			</view>
		</view>

		<view class="main-box-item">
			<view class="box-info-label">
				预约时间
			</view>
			<view class="box-info-value">
				<uni-dateformat :date="item.createtime"></uni-dateformat>
			</view>
		</view>

		<view class="main-box-item">
			<view class="box-info-label">
				{{(!!item.status)?'':'计划'}}驶入时间
			</view>
			<view class="box-info-value">
				<uni-dateformat :date="item.intime"></uni-dateformat>
			</view>
		</view>
		<view class="main-box-item">
			<view class="box-info-label">
				{{(!!item.status)?'':'计划'}}驶出时间
			</view>
			<view class="box-info-value">
				<uni-dateformat :date="item.outtime"></uni-dateformat>
			</view>
		</view>
		<!-- <view class="main-box-item2">
			<view class="box-info-label">
				健康码图片
			</view>
			<view class="box-info-value">
				<view class="img-box">
					<block v-if="(!!item.codeList)&&item.codeList.length>0">
						<view class="img-item" v-for="(item, index) in item.codeList" :key="index">
							<image class="img" @click="imgInfo(0,index)" :src="item.netpath" mode="aspectFill">
							</image>
						</view>
					</block>
					<view v-else>
						暂无
					</view>
				</view>
			</view>
		</view>
		<view class="main-box-item2">
			<view class="box-info-label">
				行程卡图片
			</view>
			<view class="box-info-value">
				<view class="img-box">
					<block v-if="(!!item.tripList)&&item.tripList.length>0">
						<view class="img-item" v-for="(item, index) in item.tripList" :key="index">
							<image class="img" @click="imgInfo(1,index)" :src="item.netpath" mode="aspectFill">
							</image>
						</view>
					</block>
					<view v-else>
						暂无
					</view>
				</view>

			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		Platform,
		Storage_Key,
	} from '@/static/config.js';
	import {
		GetRecordState,
		GetApproveState
	} from "@/common/util.js"
	import {
		GetFirstImgFormat
	} from "@/common/util-file.js";
	import request from '@/common/request.js';
	import attachment from '@/components/attachment/attachment.vue';
	export default {
		props: ['item'],
		components: {
			attachment
		},

		data() {
			return {
				//运单照片
				imgList: [],
				imgCount: 1,

				carInfo: null, // 车辆信息
				phone: null,
				wxUserInfo() {
					return this.$storage.get(Storage_Key.user_info, true);
				},
			}
		},
		mounted() {
			this.loadData(this.item.carcode);
			this.getFile1();
			this.setListening(); // 设置监听
		},
		// onLoad(options) {
		// 	if (options && options.item) {
		// 		this.item = JSON.parse(decodeURIComponent(options.item));
		// 	}
		// },
		methods: {
			//运单照片
			getFile1() {
				let that = this;
				var mFileid = !!that.item ? that.item.codeimg : "";
				var formData = {
					id: mFileid
				}
				uni.request({
					url: Platform.api_requestUrl + '/stp-common-file/GetById',
					data: formData,
					// header: {
					// 	Authorization: `Bearer ` + _self.webUserInfo.token
					// },
					method: 'GET',
					success: (res) => {
						if (res.data.data) {
							that.imgList.push(res.data.data);
							let newobj = {};
							that.imgList = that.imgList.reduce((
								preVal, curVal) => {
								newobj[curVal.id] ? '' : newobj[
									curVal.id] = preVal.push(
									curVal);
								return preVal
							}, [])
						}
					},
					complete: () => {
						// console.log("图片查询成功！")
					},
					fail: (error) => {
						uni.hideLoading();
						uni.showModal({
							content: '运单图片查询失败！',
							showCancel: false
						})
					},
				});

			},

			// 设置监听
			setListening() {
				let _self = this;
				uni.$on('approver-info', function(data) {
					if (data.key) {
						_self.phone = data.msg.phone;
					} else {

					}
				})
			},
			doPhone(number) {
				if (number === null || number === undefined || number === '' || number === '无') return
				uni.makePhoneCall({
					phoneNumber: number
				});
			},
			getRecordState(val) {
				return GetRecordState(val);
			},
			getApproveState(val) {
				return GetApproveState(val);
			},
			goCarDetail() {
				uni.navigateTo({
					url: '/pages/car/my-car-add?item=' + encodeURIComponent(JSON
						.stringify(this.carInfo)) + '&&disabled=' + true
				})
			},
			// 获取车辆信息
			loadData(carcode) {
				let _self = this;
				let totalcount = -1;
				request({
					url: Platform.api_requestUrl + '/stp-car/getListDetail',
					method: 'GET',
					data: {
						pageIndex: 1,
						pageSize: 100000000,
						carCode: carcode,
						openid: _self.wxUserInfo.openId || "",
					},
				}).then(res => {
					if (res.code == 200 && !!res.data.length != 0) {
						_self.carInfo = res.data[0];
					}
				}).catch(error => {
					uni.hideLoading();
					uni.showModal({
						content: '获取车辆信息失败',
						showCancel: false
					})
				});
				// uni.request({
				// 	url: Platform.api_requestUrl + '/stp-car/getListDetail',
				// 	data: {
				// 		pageIndex: 1,
				// 		pageSize: 100000000,
				// 		carCode: carcode,
				// 		openid: _self.wxUserInfo.openId || "",
				// 	},
				// 	header: {},
				// 	method: 'GET',
				// 	success: (res) => {
				// 		if (res.data.code == 200 && !!res.data.data.length != 0) {
				// 			_self.carInfo = res.data.data[0];
				// 		}
				// 	},
				// 	complete: () => {
				// 		console.log("complete")
				// 	},
				// 	fail: (error) => {
				// 		console.log("fail")
				// 	},
				// });
			},
			// 预览
			imgInfo(v, i) {
				let tempList = [];
				if (v == 0) {
					this.item.codeList.forEach(img => {
						tempList.push(img.netpath);
					});
				}
				if (v == 1) {
					this.item.tripList.forEach(img => {
						tempList.push(img.netpath);
					});
				}
				// **************** 预览图片 ****************
				uni.previewImage({
					current: i, //为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张
					loop: false, //是否可循环预览，默认值为 false
					urls: tempList, //需要预览的图片链接列表
					indicator: 'default' //图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。
					// longPressActions:长按图片显示操作菜单，如不填默认为保存相册
					// success
					// fail
					// complete
				});
			},

		},
	}
</script>

<style lang='scss' scoped>
	.main-box {
		/* flex: 1; */
		overflow: scroll;
		background: #e9e9e9;
		height: 100%;
		padding-top: 10rpx;

		.main-box-item {
			display: flex;
			align-items: center;
			height: 50px;
			background: #FFFFFF;
			/* box-shadow: 0px 2px 5px #F0F0F0; */
			/* border-radius: 4px; */
			vertical-align: middle;
			padding: 0px 10px;
			border-bottom-color: #E6E6E6;
			border-bottom-style: solid;
			border-bottom-width: 0.5px;

			.box-info-label {
				margin: 0 10px;
				font-size: 14px;
				font-weight: 500;
			}

			.box-info-value {
				margin-left: 10px;
				font-size: 14px;
				color: #B5B5B5;
				flex: 1;
				display: flex;

				.img {
					height: 38rpx;
					width: 38rpx;
					margin-left: 20rpx;
				}
			}

			.box-info-phone {
				display: flex;
				color: #1296db;
				font-size: 22rpx;
				margin-right: 6px;

				.img {
					height: 38rpx;
					width: 38rpx;
					margin-left: 20rpx;
				}
			}

			.status {
				float: right;
				font-size: 22rpx;
				text-align: center;
				broder: 2rpx;
				border-width: 1rpx;
				border-style: solid;
				height: 38rpx;
				width: 80rpx;
				border-radius: 10rpx;
			}
		}

		.main-box-item2 {
			display: flex;
			align-items: center;
			height: 90px;
			background: #FFFFFF;
			/* box-shadow: 0px 2px 5px #F0F0F0; */
			/* border-radius: 4px; */
			vertical-align: middle;
			padding: 0px 10px;
			border-bottom-color: #E6E6E6;
			border-bottom-style: solid;
			border-bottom-width: 0.5px;

			.box-info-label {
				margin: 0 10px;
				font-size: 14px;
				font-weight: 500;
			}

			.box-info-value {
				margin-left: 10px;
				font-size: 14px;
				color: #B5B5B5;
				flex: 1;
				display: flex;

				.img-box {
					display: flex;
					width: 100%;
					padding: 0 40rpx;
					padding-left: 10px;
					flex-direction: row;
					flex-wrap: wrap;

					.img-item {
						/* width:210rpx;
					height:210rpx; */
						width: 150rpx;
						height: 150rpx;
						border-radius: 16rpx;
						position: relative;
						/* padding: 9rpx 0; */
						margin: 10px 10rpx;

						.img {
							width: 150rpx;
							height: 150rpx;
							border-radius: 16rpx;
						}
					}
				}
			}
		}

	}
</style>
